<template>
	<view class="content">
		<view class="top flexs1">
			<view class="list flexs2" :class="(stus == index && !price) ?'bors':''" v-for="(item, index) in pricelist" :key="index"
			 @click="chooseNum(index)">
				<view class="text-bold">￥{{item.price}}</view>
				<view class="text-yellow">
					<text class="small">送￥</text>
					<text class="">{{item.song_price}}</text>
				</view>
			</view>
		</view>
		<view class="ipts flexs2">
			<input placeholder="输入自定义充值金额" v-model="price" class="text-center" />
		</view>
		<view class="btns text-white text-bold text-center" @click="rechange">立即充值</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	// var jweixin = {}
	export default {
		data() {
			return {
				stus: '',
				price: '',
				pricelist: [],
				price1: '',
				priceid: ''
			}
		},
		onShow() {
			this.initdata();
		},
		methods: {
			initdata() {
				var obj = {}
				this.$common.requests('/api/shop/rechargelist', obj).then(res => {
					if (res.data.code == 1) {
						this.pricelist = res.data.data;
						this.priceid = this.pricelist[0].id
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			chooseNum(index) {
				this.stus = index;
				this.price1 = this.pricelist[index].price
				this.price = ''
				this.priceid = this.pricelist[index].id
			},
			rechange() {
				if (this.priceid) {
					var obj = {
						recharge_id: this.priceid
					}
				}
				if (this.price) {
					var obj = {
						money: this.price
					}
				}
				this.$common.requests('/api/shop/rechangemethod', obj).then(res => {
					if (res.data.code == 1) {
						// this.$api.msg(res.data.msg)
						
						//调取微信支付
						this.getpayparme(res.data.data.order_num)
						// jweixin.ready(function(){  
						//     console.log()
						// });
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			//请求后台拿到相应参数
			getpayparme(order_num) {
				var obj = {
					type: 'wechat',
					method: 'mp',
					order_num: order_num,
					status: 1 //1 充值 2支付订单
				}
				this.$common.requests('/addons/epay/index/experience', obj).then(res => {

					console.log(res.data)
					this.onZhiFu(res.data)

				})
			},
			//调取微信支付
			onZhiFu(data) {
				let [appId, timestamp, nonceStr, signature, packages, paySign] = [data.appId, data.timeStamp, data.nonceStr, data.signature,
					data.package, data.paySign
				];

				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId, // 必填，公众号的唯一标识
					timestamp, // 必填，生成签名的时间戳
					nonceStr, // 必填，生成签名的随机串
					signature, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});

				jweixin.ready(function() {
					jweixin.chooseWXPay({
						timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr, // 支付签名随机串，不长于 32 位
						'package': packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign, // 支付签名
						success(res) {
							// 支付成功后的回调函数
							uni.switchTab({
								url:'../user/user'
							})
							cb(res);
						},
						fail(res) {
							errorCb(res);
						}
					});
				});

				jweixin.error(function(res) {
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					/*alert("config信息验证失败");*/
				});

			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		background: #F9F9F9;
	}

	.top {
		padding: 30upx;
	}

	.list {
		width: 30%;
		border: 1px solid #CACACA;
		border-radius: 20upx;
		flex-direction: column;
		padding: 20upx 0;
		background: #FFFFFF;
	}

	.text-yellow {
		padding-top: 10upx;
	}

	.small {
		font-size: 26upx;
	}

	.ipts {
		padding: 30upx;
	}

	.ipts input {
		width: 100%;
		height: 130upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}

	.btns {
		width: 76%;
		padding: 25upx 0;
		background: #14C7CE;
		border-radius: 15upx;
		margin: 50upx 12%;
		font-size: 30upx;
	}

	.bors {
		border: 1px solid #14C7CE;
	}
</style>
